<template>
	<view class="content">
		<view class="InverList margin-20">
			<view class="InverItem" v-for="(item,index) in 5" :key="index" @click="Url">
				<view class="InverTip">
					外贸
				</view>
				<view class="InverTitel" v-if="index!=1">
					消费者购车目的调查问卷
				</view>
				<view class="InverTitel" v-else>
					汽车品牌NPS问卷
				</view>
				<view class="InvetFoot">
					<view class="text">
						共8题
					</view>
					<view class="text">
						<text v-if="index!=1" class="iconfont icon-zuoyou you"></text>
						<text class="Tian" v-else>已填写 </text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 跳转答题
			Url(){
				uni.navigateTo({
					url:'/pages/Questionnaire/Questionnaire'
				})
			},
			
		}
	}
</script>

<style lang="less">
	.content{
		border-top: 1px solid #E0E0E0;
		.InverList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.InverItem{
				margin-top: 20rpx;
				width: 42.5%;
				border-radius: 10px;
				background: #FFFFFF;
				border: 1px solid #E0E0E0;
				padding: 20rpx;
				.InverTip{
					border-radius: 100px;
					background: #D43030;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 17.38px;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					vertical-align: top;
					width: 100rpx;
				}
				.InverTitel{
					font-size: 30rpx;
					font-weight: bold;
					letter-spacing: 0px;
					line-height: 21.72px;
					color: rgba(51, 51, 51, 1);
					text-align: left;
					vertical-align: top;
					padding: 20rpx 0;
					min-height: 100rpx;
				}
				.InvetFoot{
					display: flex;
					justify-content: space-between;
					.text{
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 17.38px;
						color: rgba(153, 153, 153, 1);
						text-align: left;
						vertical-align: top;
					}
					.you{
						font-size: 18rpx;
						background: #F2F2F2;
						padding: 5rpx;
						border-radius: 50%;
					}
					.Tian{
						font-size: 22rpx;
						background: #F2F2F2;
						padding: 5rpx 15rpx;
						border-radius: 30rpx;
						color: #D43030;
					}
				}
			}
		}
	}

</style>
